<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>表单</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container">
                  <!-- 默认是堆叠表单 -->
                  <form action="">
                        <div class="form-group">
                              <label for="email">邮箱地址：</label>
                              <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
                        </div>
                        <div class="form-group">
                              <label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                              <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
                        </div>
                        <div class="form-group form-check">
                              <label class="from-check-label">
                                    <input class="form-check-input" type="checkbox">记住我
                              </label>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                  </form>

                  <!-- form-inline内联表单 -->
                  <form action="" class="form-inline">
                        <label for="email">邮箱地址：</label>
                        <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
                        <label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
                        <label class="from-check-label">
                              <input class="form-check-input" type="checkbox">记住我
                        </label>
                        <button type="submit" class="btn btn-primary">提交</button>
                  </form>

                  <!-- mr-sm-2:设置右边距 mb-2设置底部边距 -->
                  <form action="" class="form-inline">
                        <label for="email" class="mr-sm-2">邮箱地址：</label>
                        <input type="email" class="form-control mb-2 mr-sm-2" placeholder="请输入邮箱地址" id="email">
                        <label for="pwd" class="mr-sm-2">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="password" class="form-control mb-2 mr-sm-2" placeholder="请输入密码" id="pwd">
                        <label class="from-check-label mr-sm-2">
                              <input class="form-check-input" type="checkbox">记住我
                        </label>
                        <button type="submit" class="btn btn-primary mb-2">提交</button>
                  </form>

                  <!-- 网格布局表单 -->
                  <form>
                      <div class="row">
                        <div class="col">
                              <input type="text" class="form-control" id="email" placeholder="请输入邮箱地址" name="email">
                        </div>
                        <div class="col">
                              <input type="password" class="form-control" placeholder="请输入密码" name="pwd">
                        </div>
                      </div>  
                      <button type="button" class="btn btn-primary">提交</button>
                  </form>
                  <!-- 比较小的间距 -->
                  <form>
                        <div class="form-row">
                          <div class="col">
                                <input type="text" class="form-control" id="email" placeholder="请输入邮箱地址" name="email">
                          </div>
                          <div class="col">
                                <input type="password" class="form-control" placeholder="请输入密码" name="pwd">
                          </div>
                        </div>  
                        <button type="button" class="btn btn-primary">提交</button>
                    </form>

                    <!-- was-validated：提前提示 -->
                  <form action="" class="was-validated">
                        <div class="form-group">
                              <label for="username">用户名</label>
                              <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" required>
                              <div class="valid-feedback">验证成功！</div>
                              <div class="invalid-feedback">请输入用户名</div>
                        </div>
                        <div class="form-group">
                              <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                              <input type="text" class="form-control" id="username" placeholder="请输入密码" name="password" required>
                              <div class="valid-feedback">验证成功！</div>
                              <div class="invalid-feedback">请输入密码！</div>
                        </div>
                        <div class="form-group form-check">
                              <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" name="remember" required>同意协议
                                    <div class="valid-feedback">验证成功！</div>
                                    <div class="invalid-feedback">同意协议才能提交！</div>
                              </label>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                  </form>

                  <!-- 提价时提示，需要搭配javascript使用 未生效需要把其他的form全部删除看看管用不-->
                  <form action="" class="needs-validation">
                        <div class="form-group">
                              <label for="username">用户名</label>
                              <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" required>
                              <div class="valid-feedback">验证成功！</div>
                              <div class="invalid-feedback">请输入用户名</div>
                        </div>
                        <div class="form-group">
                              <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                              <input type="text" class="form-control" id="username" placeholder="请输入密码" name="password" required>
                              <div class="valid-feedback">验证成功！</div>
                              <div class="invalid-feedback">请输入密码！</div>
                        </div>
                        <div class="form-group form-check">
                              <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" name="remember" required>同意协议
                                    <div class="valid-feedback">验证成功！</div>
                                    <div class="invalid-feedback">同意协议才能提交！</div>
                              </label>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                  </form>
            </div>
      </body>
      
      <script>
            // 如果验证不通过禁止提交表单
            (function() {
                  'use strict';
                  window.addEventListener('load', function() {
                  // 获取表单验证样式
                  var forms = document.getElementsByClassName('needs-validation');
                  // 循环并禁止提交
                  var validation = Array.prototype.filter.call(forms, function(form) {
                  form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                  }, false);
                  });
                  }, false);
            })();
      </script>
</html>